<template>
  <div style="display:flex;flex-direction:column;background-color:#d6d6d6;">
    <div style="padding-top:20px;">
      <div style="margin-left:10px;margin-right:10px;background-color:white;height:80px;border-radius:5px;line-height:80px;text-align:center;"
           @click="addTitle">
        <div style="font-weight: bold;font-size: large;"
             v-if="this.title === ''">请输入标题</div>
        <div style="font-weight: bold;font-size: large;"
             v-if="this.title !== ''">{{title}}</div>
      </div>
    </div>
    <div style="padding-top:20px;">
      <div style="margin-left:10px;margin-right:10px;background-color:white;height:80px;border-radius:5px;line-height:80px;">
        <div style="display:flex;justify-content:center;">
          <div style="line-height:85px;">
            <van-icon name="add-o"
                      color="coral" />
          </div>
          <div style="margin-left:5px;font-size:15px;color:coral;">添加轮播图</div>
        </div>
      </div>
    </div>
    <div style="display:flex;text-align:center;width:100%;">
      <div :style="{ 'border': '1px solid red','text-align':'left','margin-top':'20px','width': clientWidth + 'px'}">
        测试
      </div>
    </div>
    <!-- <div>
      <el-editor id="contentEditor"
                 v-bind:style="{'text-align':'left','margin-top':'20px','width': clientWidth + 'px'}"
                 ref="artEditor"
                 :options="editorOption">
      </el-editor>
    </div> -->
    <!-- <div style="position:fixed;left:10px;right:10px;bottom:0px;">
      <div>
        <van-button type="warning"
                    class="button"
                    size="large"
                    @click="saveArticle">保存</van-button>
      </div>
    </div>
    <div>
      <van-dialog v-model="isBrand"
                  title="请选择您要添加的品牌"
                  @confirm="saveArticle">
        <div style="margin-left:20px;margin-top:20px;">
          <van-radio-group v-model="brand"
                           v-for="item in brandList"
                           v-bind:key="item.id">
            <div>
              <van-radio :name="item.id"
                         checked-color="orange">{{item.brandName}}</van-radio>
              <van-divider />
            </div>
          </van-radio-group>
        </div>
      </van-dialog>
    </div>
    <div>
      <van-dialog v-model="isShowBrand"
                  title="您还有空的未填写">
      </van-dialog>
    </div>
    <div>
      <van-dialog v-model="isTitle"
                  title="请输入文章标题"
                  show-cancel-button>
        <van-field v-model="title"
                   placeholder="请输入文章标题" />
      </van-dialog>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      clientWidth: window.innerWidth - 20,
      title: 'saasdasd',
      collectionArticleList: [{
        articleTitle: '测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题'
      },
      {
        articleTitle: '测试标题测试标题测试标题测试标题测试标题测试标题测试'
      },
      {
        articleTitle: '测试标题测试标题'
      },
      {
        articleTitle: '标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测'
      }
      ],
      loading: false,
      finished: true,
      articleListError: false
    }
  },
  mounted () {
  },
  methods: {
    getCollectionArticleList () {
      return false
    },
    addTitle () {

    },
    SeeHotArticle () {

    },
    referencesHandle () {

    },
    pushSettingHandle () {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cellClass {
  margin-top: 10px;
}
.img {
  width: 50px;
  border-radius: 5px;
}
.image {
  width: 50px;
  height: 50px;
  position: relative;
}
</style>
